var go_panel;
var line_color = 'green';
//var go.GraphObject.makego.GraphObject.make;
var status_img = ['', "images/red-cross-50x50.png"];

var node_data = [];

var topology_none = 'gold';
var service_none = 'pink';


var showPorts = function showPorts(node, show) {
    var go_panel = node.diagram;
    if (!go_panel || go_panel.isReadOnly || !go_panel.allowLink) return;
  
      go_panel.skipsUndoManager = true;
      var it = node.ports;
      while (it.next()) {
      var port = it.value;
        port.stroke = (show ? "red" : null);
      }
      go_panel.update();
      go_panel.skipsUndoManager = false;
}




var CanvasInit = function() {

    canvas = document.getElementById('canvas');
    go_panel = new go.Diagram(canvas);
    go_panel.position = new go.Point(-5, -5);
    go_panel.toolManager.panningTool.isEnabled = false;

    
    go_panel.nodeTemplate = go.GraphObject.make(go.Node, go.Panel.Auto,
                { locationSpot: go.Spot.Center },
                { mouseEnter: function(e, obj) { showPorts(obj.part, true); },  mouseLeave: function(e, obj) { showPorts(obj.part, false); } },
                new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),  // TwoWay Binding
                {selectionChanged: node_click },
                go.GraphObject.make(go.Shape, { 
                    figure: "Rectangle", fill: null, portId: "", 
                    //fromSpot: go.Spot.Bottom, toSpot: go.Spot.Top,
                    fromLinkable: true, toLinkable: true
                }),
                go.GraphObject.make(go.Panel, go.Panel.Vertical,
                    {margin: 1},
                    go.GraphObject.make(go.Panel, go.Panel.Auto,
                        go.GraphObject.make(go.Picture, 
                            new go.Binding("desiredSize", "desiredSize_1", go.Size.parse).makeTwoWay(go.Size.stringify),
                            new go.Binding("source", "img_url")
                        ),
                        go.GraphObject.make(go.Picture,
                            new go.Binding("desiredSize", "desiredSize_2", go.Size.parse).makeTwoWay(go.Size.stringify),
                            new go.Binding("source", "is_in_service", function(b) { if (b) return status_img[0]; else return status_img[1]; } )
                        ),
                        go.GraphObject.make(go.Shape, { 
                            figure: "Ellipse", fill: "transparent", stroke: null,
                            desiredSize: new go.Size(6, 6),
                            alignment: go.Spot.Top, alignmentFocus: go.Spot.Top,
                            portId: "T", 
                            fromLinkable: false, toLinkable: true, 
                            cursor: "pointer" 
                        }),
                        go.GraphObject.make(go.Shape, { 
                            figure: "Ellipse", fill: "transparent", stroke: null,
                            desiredSize: new go.Size(6, 6),
                            alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Bottom,
                            portId: "B", 
                            fromLinkable: true, toLinkable: false, cursor: "pointer" 
                        })
                    ),
                    go.GraphObject.make(go.TextBlock, {margin: 2}, new go.Binding("text", "label") ),
                    go.GraphObject.make("TreeExpanderButton")
                )
            );   
            go_panel.addDiagramListener('LinkDrawn', function(e){validateLink(e)}); 
            
//            go_panel.addDiagramListener('LinkDrawn', function(e) {
//                  e.subject.elt(0).stroke = line_color;  
//                  e.subject.data.stroke =  line_color;  
//              });

        go_panel.linkTemplate =
            go.GraphObject.make(go.Link,
                    {routing: go.Link.AvoidsNodes},
                    {curve: go.Link.JumpOver},
                    {corner: 10},
                    {relinkableFrom: true, relinkableTo: true},
                    {selectionChanged: showLinkProperties},
                    go.GraphObject.make(go.Shape, { strokeWidth: 1 }, new go.Binding("stroke", "stroke") ),
                    go.GraphObject.make(go.Shape, { toArrow: "Standard" }),
    
                    go.GraphObject.make(go.TextBlock,{
                            segmentIndex: 0,
                            segmentOffset: new go.Point(NaN, NaN),
                            segmentOrientation: go.Link.OrientUpright,
                        }, 
                        new go.Binding("text", "bottomlabel")
                    ),
                    go.GraphObject.make(go.TextBlock,{
                            segmentIndex: -1, 
                            segmentOffset: new go.Point(NaN, NaN),
                            segmentOrientation: go.Link.OrientUpright
                        }, 
                        new go.Binding("text", "toplabel")
                    )
                    
                    
            )
            
            

       


      var nodeDataArray = [];
      var linkDataArray = [];

      go_panel.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); 
      go_panel.layout = go.GraphObject.make(go.LayeredDigraphLayout, { direction: 90 });
                                      
}